<template>
<div class="c-page">
  <div class="title">音视频统计图</div>
  <div class="plan">
    <div class="item">
      本月22件
    </div>
    <div class="item">
      此废率：12.61%
    </div>
  </div>
  <div class="barChart" ref="barChart"></div>
  <div class="lineChart" ref="lineChart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      myBarChart: null,
      myLineChart: null,
      lineChartOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          top: "10px",
          bottom: "4%",
          left: "0%",
          right: "4%",
          containLabel: true,
        },
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          // x轴线的颜色为   rgba(255,255,255,.2)
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        }, ],
        yAxis: [{
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          // 修改分割线的颜色
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        }, ],
        series: [{
          name: "视频广告",
          type: "line",
          smooth: true,
          stack: "总量",
          // 填充区域
          lineStyle: {
            color: "#0184d5",
            width: 2,
          },
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [{
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
          symbol: "circle",
          // 拐点大小
          symbolSize: 8,
          // 设置拐点颜色以及边框
          itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12,
          },
          // 开始不显示拐点， 鼠标经过显示
          showSymbol: false,
          data: [150, 232, 201, 154, 190, 330, 410],
        }],
      },
      barChartOptions: {
        color: ["#2f89cf"],
        //表格大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效,影子效果
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: [{
          type: "category",
          data: [
            "动作片",
            "动画片",
            "电视剧",
            "纪录片",
            "综艺片",
            "伦理片",
            "恐怖片",
          ],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
        }, ],
        yAxis: [{
          type: "value",
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12",
          },
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 1,
            type: "solid",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        }, ],
        series: [{
          name: "直接访问",
          type: "bar",
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                  offset: 0,
                  color: '#83bff6'
                },
                {
                  offset: 0.5,
                  color: '#188df0'
                },
                {
                  offset: 1,
                  color: '#188df0'
                }
              ]
            )
          },
          barWidth: "40%",
          data: [10, 52, 200, 334, 390, 330, 220],
        }, ],
      },
    }
  },
  mounted() {
    this.createBarEchart();
    this.createLineEchart();
  },
  methods: {
    createLineEchart() {
      this.myLineChart = this.$echarts
        .init(this.$refs.lineChart)
        .setOption(this.lineChartOptions);
      window.addEventListener("resize", () => {
        this.myLineChart.resize();
      });
    },
    createBarEchart() {
      this.myBarChart = this.$echarts
        .init(this.$refs.barChart)
        .setOption(this.barChartOptions);
      window.addEventListener("resize", () => {
        this.myBarChart.resize();
      });
    },
  },
}
</script>

<style lang="less" scoped>
.c-page {
  width: 100%;
  height: 100%;
  padding: 5px;
  cursor: pointer;
  display: flex;
  flex-flow: column;

  .title {
    border-left: 3px solid #1CB9FC;
    padding: 5px;
    text-align: left;
    font-size: 14px;
    width: 40%;
    background-image: linear-gradient(to right, #1CB9FC, #050D3E);
  }

  .barChart {
    height: 35%;
    width: 100%;
  }

  .lineChart {
    height: 60%;
    width: 100%;
  }

  .plan {
    color: #2ED1E0;
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    margin: 5px 0;

    .item {
      margin: 0 5px;
    }
  }

}
</style>
